<template>
  <el-select v-model="driverId" filterable remote :loading="loading" placeholder="请选择司机"
    @visible-change="handleVisibleChange" @change="changeDriver" :remote-method="remoteMethod"
    no-data-text="暂无司机">
    <el-option v-for="item in list" :key="item.ID" :label="item.Label" :value="item.ID">
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    sign: {
      type: [String, Number],
      default: ''
    },
    octopus: {
      type: Object,
      default: {}
    },
    driver: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      driverId: null,
      list: [],
      loading: false,
    }
  },
  
  watch: {
    driver: {
      deep: true,
      immediate: true,
      handler(v) {
        if(v) {
          this.searchCat().then(res=> {
            this.list = res
            this.driverId = this.driver
          })
        }
      }
    },
    immediate: true    
  },
  methods: {
    handleVisibleChange(visible) {
      if(visible && this.list.length == 0) {
        this.loading = true;
        this.searchCat().then(res => {
          this.list = res
        })
      }
    },

    remoteMethod(key) {
      if(key) {
        const o = this
        this.list = []
        let queueList = []
        queueList.push(this.searchCat('Code', key))
        queueList.push(this.searchCat('Name', key))
        queueList.push(this.searchCat('Mobile', key))
        Promise.all(queueList).then(queList => {
          queList.map(list => {
            if(list.length) {
              list.map(item=> {
                if(o.list.findIndex(oItem => oItem.ID == item.ID) == -1)
                o.list.push(item)
              })
            }
          })
        })
      } else {
        this.searchCat().then(res => this.list = res)
      }
    },
    searchCat(type = "all", value) {
      return new Promise((resolve, reject) => {
        const o = this
        let cellData = [
          {name: "ID"},	// ID
          {name: "Name"},	// 真实名
          {name: "Code"},	// 工号
          {name: "Mobile"},	// 手机号
        ]
        if(type != 'all') {
          cellData.map(item => {
            if(item.name == type) {
              item.filterKey = 'like',
              item.filterValue = value
            }
          })
        }
        o.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1219,
            cellData,
            paramData: {
              // this.octopus.passport.authorization.company 
              CompanyID: 81, //模拟强生账号
              RoleID: 141,
              Status: 1
            }
          },
          function (data) {
            if (data.status.code == 200) {
              let arr = data.content.queryData.map(item => {
                item.Label = item.Code + '-' + item.Name + '-' + item.Mobile
                return item
              })
              o.loading = false
              resolve(arr)
            } else {
              o.octopus.tips.error(data);
              reject(data)
            }
          });
        })
    },

    changeDriver(e) {
      const data = this.list.find(item => item.ID == e)
      this.$emit('getDriverId', { sign: this.sign, id: e, data })
    }
  }
}
</script>

<style scoped>

</style>